<!--suppress ALL -->
<template>
  <div>
    <ts-header title="订单"></ts-header>
    <section class="filter" style="margin-bottom: .06rem">
      <div class="filter-header">
        <a v-for="(item,key,index) in filterItem" class="filter-item"
           @click="setCurrTabIndex(index)" :class="index===currentTabIndex?'active':''">{{item.name}}</a>
      </div>
    </section>
    <flex-view>
      <div class="order-container">

        <div class="order-card-list"
             v-for="(item,key,index) in orderList" :key="index"
             v-show="currentTabIndex===index">

          <pull-to :topLoadMethod="refresh"
                   @top-state-change="stateChange"
                   :top-config="topConfig"
                   @infinite-scroll="loadMore">

            <!--<div class="order-spinner" v-if="filterItem[index].loading">-->
            <!--<mt-spinner type="fading-circle" color="#26a2ff"></mt-spinner>-->
            <!--</div>-->

            <template slot="top-block" scope="props">
              <div class="top-load-wrapper">
                <svg class="icon"
                     :class="{
                'icon-arrow': props.state === 'trigger',
                'icon-loading': props.state === 'loading'}"
                     aria-hidden="true">
                  <use :xlink:href="iconLink"></use>
                </svg>
                {{ props.stateText }}
              </div>
            </template>

            <transition-group name="card-left">
              <section class="order-list card-animate" v-for="(order,num) in item" :key="order.id">
                <div class="head">
                  <span class="order-no">订单编号：{{order.order_id}}</span>
                  <span v-if="order.order_status!==4&&order.order_status!==5&&order.order_status!==1" class="contacts">{{order.name}}
                  <a v-show="order.order_status!==4" :href="`tel:${order.tel}`">
                 <img class="contacts-icon" src="../../../assets/imgs/icon/phone-orange.png"/>
                  </a>
                </span>
                </div>
                <ul class="data-list">
                  <li class="list-item">
                  <span class="item-rows">服务类型：<span class="item-value">
                    {{order.type_name + '-' + order.brand_name + '-' + order.class_name}}</span></span>
                  </li>
                  <li class="list-item">
                  <span class="item-rows">订单状态：
                    <span class="item-value" >
                      {{order_status(order.order_status)}}
                     </span>
                  </span>
                  </li>
                  <li class="list-item">
                    <span class="item-rows">上门费用：<span class="item-value">{{order.price}}元</span></span>
                  </li>
                  <li class="list-item">
                   <span class="item-rows">上门时间：<span
                     class="item-value">{{order.make_time | fmtCommonDate}}</span></span>
                  </li>
                  <li class="list-item">
                    <span class="item-rows">服务位置：<span
                      @click="goAmap({lon:order.lon,lat:order.lat,destName:order.latlon_address})"
                      class="item-value addr-active">
                    <img class="list-item-icon"
                         src="../../../assets/imgs/icon/address.png"/>{{order.address}}</span></span>
                  </li>

                  <li class="list-item"  v-if="order.image&&order.image.length>0" >
                    <span class="item-rows">故障照片：
                      <span class="item-value link"
                            @click="showPhoto(order.image)">
                        点击查看</span></span>
                  </li>
                  <li class="list-item" v-show="order.note">
                    <span class="item-rows">
                      <span class="frist">备&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注：</span>
                       <!--<span>备-->
                      <!--<span style="visibility: hidden">占占</span>注：</span>-->
                      <span
                      class="item-value long-value"
                      :class="{'show-long':showLong[num]}">{{order.note}}</span>
                     <img @click="showLongValues(num)" class="item-icon"
                          :class="{'rot-img':showLong[num]}" src="../../../assets/imgs/icon/down.png">
                      </span>
                  </li>
                </ul>
                <div class="footer" v-if="order.order_status!=4 && order.order_status!=5">
                  <ts-button v-if="order.order_status===1" type="default" class="radius-btn"
                             @click="ignoreOrder(order.id,num)"
                             plain>拒绝
                  </ts-button>
                  <ts-button v-if="order.order_status===1" type="primary" class="radius-btn"
                             @click="orderAction(2,order.id,order.order_status,num)" plain>
                    接单
                  </ts-button>
                  <ts-button v-if="order.order_status===2||order.order_status===3" type="default"
                             class="radius-btn"
                             @click="showMdModal(order.id,num)" plain>
                    改期
                  </ts-button>
                  <ts-button v-if="order.order_status===2" type="primary" class="radius-btn"
                             @click="orderAction(3,order.id,num)" plain>
                    开始服务
                  </ts-button>
                  <ts-button v-if="order.order_status===3" type="primary" class="radius-btn"
                             @click="orderAction(4,order.id,order.order_status,num)" plain>
                    完成
                  </ts-button>
                </div>
              </section>
            </transition-group>

            <div class="loading-bar">
              <span v-if="!filterItem[index].allLoaded">
                   <svg class="icon icon-loading"
                        aria-hidden="true">
                      <use xlink:href="#icon-loading"></use>
                   </svg>
                  加载中...
              </span>
              <span class="no-more" v-else>
                暂无更多数据
              </span>
            </div>


          </pull-to>

        </div>

      </div>
    </flex-view>

    <ts-modal title="提示" v-model="mdDateVisible" :lock="true" @onConfirm="mdOrderDate">
      <div class="md-date-container">
        <section class="md-date-reason">
          <label class="md-date-title">改期原因</label>
          <textarea v-model="mdDateForm.rescheduled_events" class="md-date-textarea" rows="4" placeholder="请对原因进行简洁的描述">
          </textarea>
        </section>
        <section class="md-date-reason date-time">
          <label class="md-date-title">改期时间</label>
          <input @click="showTimeSetting"
                 v-model="mdDateForm.temp_time" class="md-input-time" placeholder="请选择" type="text"
                 readonly="readonly"/>
        </section>
      </div>
    </ts-modal>

    <md-time-picker @complete="finishMdTime" v-model="mdTimeVisible"></md-time-picker>

    <ts-tabbar ref="tabbar"></ts-tabbar>

    <div v-transfer-dom>
      <previewer :list="imgList" ref="previewer"></previewer>
    </div>

  </div>
</template>
<style lang="scss" scoped src="./order.scss"></style>
<script src="./order.js"></script>
<style lang="scss">
  .order-card-list {
    height: 100%;
  }

  .card-animate {
    transition: .8s all ease;
  }

  .card-left-enter, .card-left-leave-active {
    opacity: 0;
  }

  .md-date-container {
    .md-date-reason {
      &.date-time {
        .md-input-time {
          background: #F7F7F7 url(../../../assets/imgs/icon/right.png) no-repeat 96%;
        }
      }
    }
  }
</style>
